<template>
  <div class="transferBillList">
    <div class="publicSearch">
      <div class="searchBar" :style="{ height: isMoreSearch ? 'auto' : '' }">
        <el-button-group>
          <el-button @click="gettransferBillListData" size="mini" icon="el-icon-search">查询</el-button>
          <el-button @click="clearSearchData" size="mini" icon="el-icon-refresh">重置</el-button>
        </el-button-group>
        <div>
          <span>批次编码查询</span>
          <el-input v-model="searchData.batchName" size="mini" placeholder="批次编码" clearable></el-input>
        </div>
      </div>
    </div>

    <div class="headerBtns">
      <el-button
        size="small"
        type="primary"
        round
        icon="iconfont icon-xinzeng"
        @click="dialogNewVisible = true"
      >新增</el-button>
    </div>
    <el-dialog
      title="新增转移单"
      :visible.sync="dialogNewVisible"
      :before-close="handleClose"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form :model="form" :rules="rules" ref="form">
        <!-- <el-form-item label="物料编码" prop="itemCode" :label-width="formLabelWidth">
          <el-input
            v-model="form.itemCode"
            placeholder="请输入物料编码"
            maxlength="20"
            style="width: 90%;"
          ></el-input>
        </el-form-item>

        <el-form-item label="物料名称" prop="itemName" :label-width="formLabelWidth">
          <el-input v-model="form.itemName" placeholder="请输入物料名称" style="width: 90%;"></el-input>
        </el-form-item>

        <el-form-item label="来源库位" prop="fromCellCode" :label-width="formLabelWidth">
          <el-input
            v-model="form.fromCellCode"
            placeholder="请输入来源库位"
            maxlength="20"
            style="width: 90%;"
          ></el-input>
        </el-form-item>-->

        <el-form-item label="来源容器" prop="fromBoxCode" :label-width="formLabelWidth">
          <el-input v-model="form.fromBoxCode" placeholder="请输入容器号" style="width: 90%;"></el-input>
        </el-form-item>
        <!-- 
        <el-form-item label="目标库位" prop="toCellCode" :label-width="formLabelWidth">
          <el-input v-model="form.toCellCode" placeholder="请输入目标库位" style="width: 90%;"></el-input>
        </el-form-item>-->
        <el-form-item label="目标库位" prop="toCellCode" :label-width="formLabelWidth">
          <el-input
            :title="form.toCellCode"
            v-model="form.toCellCode"
            placeholder="请输入编码"
            style="width: 60%"
          ></el-input>
          <el-button
            @click="showSelectCellModal"
            icon="iconfont icon-jia"
            type="text"
            style="width: 10%"
          ></el-button>
        </el-form-item>
        <!--         
        <el-form-item label="批次号" prop="batchName" :label-width="formLabelWidth">
          <el-input v-model="form.batchName" placeholder="请输入批次号" style="width: 90%;"></el-input>
        </el-form-item>

        <el-form-item label="数量" prop="qty" :label-width="formLabelWidth">
          <el-input v-model="form.qty" placeholder="请输入数量" style="width: 90%;"></el-input>
        </el-form-item>-->
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('form');dialogNewVisible = false">取 消</el-button>
        <el-button type="primary" @click="commitForm('form')">确 定</el-button>
      </div>

      <el-dialog
        width="800px"
        title="选择货位"
        :visible.sync="innerVisibleCell"
        append-to-body
        style="margin-top: -10vh"
      >
        <div class="publicSearch body">
          <div class="searchBar" :style="{ height: isMoreSearch3 ? 'auto' : '' }">
            <el-button-group>
              <el-button @click="getCellData" size="mini" icon="el-icon-search">查询</el-button>
              <el-button @click="clearSearchSelectCell" size="mini" icon="el-icon-refresh">重置</el-button>
            </el-button-group>
            <div>
              <span>关键字搜索</span>
              <el-input v-model="searchSelectCell.keyWords" size="mini" placeholder="名称" clearable></el-input>
            </div>
            <div>
              <span>货区</span>
              <el-select
                v-model="searchSelectCell.areaId"
                size="mini"
                filterable
                placeholder="请选择货区"
                style="width: 70%"
              >
                <el-option
                  v-for="item in areas"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item.areaId"
                ></el-option>
              </el-select>
            </div>
          </div>
          <span
            class="moreSearchBtn"
            :class="
              isMoreSearch3 ? 'el-icon-caret-top' : 'el-icon-caret-bottom'
            "
            @click="isMoreSearch3 = !isMoreSearch3"
          ></span>
        </div>

        <div class="tableBox">
          <el-table highlight-current-row :data="cells" style="width: 100%">
            <el-table-column fixed="left" type="index" width="50"></el-table-column>
            <el-table-column fixed="left" sortable prop="cellName" label="名称" width="180"></el-table-column>
            <el-table-column sortable show-overflow-tooltip prop="cellCode" label="编码" width="180"></el-table-column>
            <el-table-column
              sortable
              show-overflow-tooltip
              prop="shelfName"
              label="所属货位组"
              width="180"
            ></el-table-column>

            <el-table-column sortable show-overflow-tooltip prop="length" label="长" width="180"></el-table-column>
            <el-table-column sortable show-overflow-tooltip prop="wide" label="宽" width="180"></el-table-column>
            <el-table-column sortable show-overflow-tooltip prop="high" label="高" width="180"></el-table-column>

            <el-table-column
              sortable
              show-overflow-tooltip
              prop="xCoordinate"
              label="X坐标"
              width="180"
            ></el-table-column>
            <el-table-column
              sortable
              show-overflow-tooltip
              prop="yCoordinate"
              label="Y坐标"
              width="180"
            ></el-table-column>
            <el-table-column fixed="right" label="操作" width="110">
              <template slot-scope="scope">
                <el-button
                  @click="selectCell(scope.row.cellCode)"
                  icon="iconfont icon-jia1"
                  type="primary"
                  circle
                  plain
                  size="small"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            style="text-align: right"
            @current-change="handleCurrentChange3"
            :current-page.sync="searchSelectCell.pageNum"
            :page-size="searchSelectCell.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="searchSelectCell.total"
          ></el-pagination>
        </div>
      </el-dialog>
    </el-dialog>

    <div class="tableBox none">
      <el-table
        v-loading="loading.masterTable"
        highlight-current-row
        :data="transferBillLists"
        style="width: 100%"
        :row-style="Mystyle"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column fixed="left" type="index" width="50"></el-table-column>
        <el-table-column show-overflow-tooltip prop="transferBillCode" label="单据号" min-width="150">
          <template slot-scope="scope">
            <span class="textBtn" @click="test(scope.row.transferBillCode, 'item')">
              {{
              scope.row.transferBillCode
              }}
            </span>
          </template>
        </el-table-column>

        <el-table-column show-overflow-tooltip prop="itemCode" label="物料编码" min-width="150">
          <template slot-scope="scope">
            <span class="textBtn" @click="test(scope.row.itemCode, 'item')">
              {{
              scope.row.itemCode
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="itemName" label="物料名称" min-width="150">
          <template slot-scope="scope">
            <span class="textBtn" @click="test(scope.row.itemName, 'item')">
              {{
              scope.row.itemName
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          sortable
          show-overflow-tooltip
          prop="fromCellCode"
          label="来源库位"
          width="180"
        ></el-table-column>
        <el-table-column sortable show-overflow-tooltip prop="toCellCode" label="目标库位" width="180"></el-table-column>
        <el-table-column sortable show-overflow-tooltip prop="fromBoxCode" label="容器号" width="180"></el-table-column>
        <el-table-column sortable show-overflow-tooltip prop="batchName" label="批次号" width="180"></el-table-column>
        <el-table-column sortable show-overflow-tooltip prop="qty" label="数量" min-width="100"></el-table-column>
        <el-table-column
          sortable
          show-overflow-tooltip
          prop="confirmTime"
          label="转移时间"
          min-width="160"
        ></el-table-column>
        <el-table-column fixed="right" label="操作" min-width="80">
          <template slot-scope="scope">
            <el-button
              @click="showNewModal(scope.row)"
              type="primary"
              size="small"
              :disabled="scope.row.state === 2"
            >&nbsp;确认</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        style="text-align: right"
        class="pagination-bottom"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :page-sizes="[10, 20, 30, 50]"
        :current-page.sync="searchData.pageNum"
        :page-size="searchData.pageSize"
        layout="sizes,total, prev, pager, next"
        :total="searchData.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "transferBillList",
  data() {
    // 校验规则
    return {
      isMoreSearch: false,
      loading: {
        masterTable: true
      },
      // 用作查询的数据
      searchData: {
        // 仓库编码 获得当前仓库的编码
        wareId: PF.getLocal("wareId", "number"),
        pageNum: 1,
        pageSize: 10,
        total: null,
        // 批次号查询
        batchName: ""
      },
      // 用于转移单确认的数据
      updateData: {
        // 仓库编码 获得当前仓库的编码
        wareId: PF.getLocal("wareId", "number"),
        // 单据号
        transferBillCode: ""
      },
      searchStates: [
        {
          value: "enable",
          label: "启用"
        },
        {
          value: "disable",
          label: "禁用"
        }
      ],
      //存放装箱单数据的数组
      transferBillLists: [],
      // 控制新增的页面
      dialogNewVisible: false,
      form: {
        // 仓库编码 获得当前仓库的编码
        wareId: PF.getLocal("wareId", "number"),
        // 单据号
        transferBillCode: "",
        // 物料编码
        itemCode: "",
        // 物料名称
        itemName: "",
        // 来源库位
        fromCellCode: "",
        // 目标库位
        toCellCode: "",
        // 容器号
        fromBoxCode: "",
        // 批次号
        batchName: "",
        // 数量
        qty: ""
        // // 选中数据
        // row: {}
      },
      // 查询存储区库位
      searchSelectCell: {
        pageNum: 1,
        pageSize: 5,
        total: null,
        keyWords: "",
        wareId: "",
        areaId: "",
        cellUseTypes: { 0: 2 }
      },
      // 控制存储区库位的弹框
      innerVisibleCell: false,
      // 新增转移单的表单校验
      rules: {
        transferBillCode: [
          { required: true, message: "请输入单据号", trigger: "blur" }
        ],
        itemCode: [
          { required: true, message: "请输入物料编码", trigger: "blur" }
        ],
        itemName: [
          { required: true, message: "请输入物料名称", trigger: "blur" }
        ],
        toCellCode: [
          { required: true, message: "请输入目标库位", trigger: "blur" }
        ],
        fromBoxCode: [
          { required: true, message: "请输入容器号", trigger: "blur" }
        ],
        batchName: [
          { required: true, message: "请输入批次号", trigger: "blur" }
        ],
        fromCellCode: [
          { required: true, message: "请输入来源库位", trigger: "blur" }
        ],
        qty: [{ required: true, message: "请输入数量", trigger: "blur" }]
      },
      formLabelWidth: "120px",
      rowData: {
        //
      },
      Mystyle: { height: "50px" },
      filterText: "",
      defaultProps: {
        children: "children",
        label: "name"
      },

      tableRowClassName({ row, rowIndex }) {
        if (row.accountStatus === "disable") {
          return "disable-row";
        } else if (row.accountStatus === "enable") {
          return "enable-row";
        }
        return "";
      }
    };
  },
  computed: {},
  watch: {
    //
  },
  methods: {
    //分页设置每页的条数
    handleSizeChange(val) {
      this.searchData.pageSize = val;
      this.gettransferBillListData();
    },
    //分页设置从第几条开始
    handleCurrentChange(val) {
      this.searchData.pageNum = val;
      this.gettransferBillListData();
    },
    // 新增的重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 提交表单--新增转移单
    commitForm(formName) {
      let that = this;
      IOT.showOverlay("保存中，请稍等...");
      this.$refs[formName].validate(valid => {
        if (valid) {
          IOT.getServerData(
            "/transfer/transferBill/insert",
            "post",
            this.form,
            ret => {
              if (ret.code === 200) {
                IOT.hideOverlay();
                IOT.tips("新增成功", "success", 1000, () => {
                  IOT.showOverlay("正在刷新，请稍等...");
                  // 刷新当前页面
                  this.gettransferBillListData();
                  IOT.hideOverlay();
                });
              } else {
                IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
                IOT.hideOverlay();
              }
            },
            true
          );
          this.resetForm("form");
          this.dialogNewVisible = false;
        } else {
          IOT.hideOverlay();
          console.error("error submit!!");
          return false;
        }
      });
    },
    // 清空查询条件批次号
    clearSearchData() {
      this.searchData.batchName = "";
    },
    // 打开存储区库位信息

    showSelectCellModal() {
      if (!PF.isNull(this.form.wareId)) {
        IOT.tips("未选择仓库！", "error");
        return false;
      }

      this.searchSelectCell.wareId = this.form.wareId;
      this.getCellData();
      this.getAreaData();
      this.innerVisibleCell = true;
    },
    // 获取库位信息
    getCellData() {
      IOT.getServerData(
        "/cell/infos/list",
        "get",
        this.searchSelectCell,
        ret => {
          if (ret.code === 200) {
            this.cells = ret.rows;
            this.searchSelectCell.total = ret.total;
            this.searchSelectCell.pageNum = ret.pageNumber;
          } else {
            IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
          }
        }
      );
    },
    // 获取货区信息
    getAreaData() {
      IOT.getServerData(
        "/area/infos/list",
        "get",
        { wareId: this.searchSelectCell.wareId },
        ret => {
          if (ret.code === 200) {
            this.areas = ret.rows;
          } else {
            IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
          }
        }
      );
    },
    //根据筛选条件查询数据
    gettransferBillListData() {
      let that = this;
      that.loading.masterTable = true;
      let searchData = JSON.parse(JSON.stringify(this.searchData));
      IOT.getServerData(
        "/transfer/transferBill/list",
        "get",
        searchData,
        ret => {
          that.loading.masterTable = false;
          if (ret.code === 200) {
            // rows就是返回的数据
            this.transferBillLists = ret.rows;
            this.searchData.total = ret.total;
            this.searchData.pageNum = ret.pageNumber;
          } else {
            IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
          }
        }
      );
    },
    // 带回库位编码
    selectCell(cellCode) {
      this.form.toCellCode = cellCode;
      this.innerVisibleCell = false;
    },
    // 关闭转移单新增
    handleClose() {
      // this.$confirm('确认关闭？')
      //     .then(_ => {
      this.resetForm("form");
      this.dialogNewVisible = false;
      //     done();
      // })
      // .catch(_ => {});
    },
    //转移单确认
    showNewModal(row) {
      if (row == null) {
        this.$message({
          message: "请选择一条数据",
          type: "warning"
        });
      } else {
        // 这里来确认转移单
        let that = this;
        that.loading.masterTable = true;
        this.updateData.transferBillCode = row.transferBillCode;
        let updateData = JSON.parse(JSON.stringify(this.updateData));
        IOT.getServerData(
          "/transfer/transferBill/updateState",
          "post",
          updateData,
          ret => {
            that.loading.masterTable = false;
            if (ret.code === 200) {
              IOT.tips(ret.message || "操作成功", "success");
              // rows就是返回的数据
              this.gettransferBillListData();
            } else {
              IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
            }
          }
        );
      }
    }
  },
  // 页面加载时刷新
  created() {
    this.searchData.pageNum = 1;
    this.searchData.pageSize = 10;
    //请求数据
    this.gettransferBillListData();
  }
};
</script>

<style scoped lang="less">
.transferBillList {
}
</style>
